<template>
    <div>
        <div class="menu" editor-component="menu">
          <div class="menu-item">
                <div @click="menu_item_back" class="menu-item__back" title="返回">
                <i></i>
                </div>
            </div>
            <div class="menu-item">
                <div @click="menu_item_undoclick" class="menu-item__undo" title="撤销(Ctrl+Z)">
                <i></i>
                </div>
                <div @click="menu_item_redoclick"  @dblclick="menu_item_redodblclick" class="menu-item__redo"  title="重做(Ctrl+y)">
                <i></i>
                </div>
                <div @click="menu_item_painterclick" class="menu-item__painter" title="格式刷(双击可连续使用)">
                <i></i>
                </div>
                <div @click="menu_item_formatclick" class="menu-item__format" title="清除格式">
                <i></i>
                </div>
            </div>
            <div class="menu-divider"></div>
            <div class="menu-item">
                <div  class="menu-item__font">
                  <span class="select" data-toggle="dropdown" title="字体">{{menu_item_font_model.name}}</span>
                  <div class="dropdown-menu" @click="menu_item_font_click">
                    <ul>
                      <li class="dropdown-item" data-family="Microsoft YaHei" style="font-family:'Microsoft YaHei';">微软雅黑</li>
                      <li class="dropdown-item" data-family="宋体" style="font-family:'宋体';">宋体</li>
                      <li class="dropdown-item" data-family="黑体" style="font-family:'黑体';">黑体</li>
                      <li class="dropdown-item" data-family="仿宋" style="font-family:'仿宋';">仿宋</li>
                      <li class="dropdown-item" data-family="楷体" style="font-family:'楷体';">楷体</li>
                      <li class="dropdown-item" data-family="等线" style="font-family:'等线';">等线</li>
                      <li class="dropdown-item" data-family="华文琥珀" style="font-family:'华文琥珀';">华文琥珀</li>
                      <li class="dropdown-item" data-family="华文楷体" style="font-family:'华文楷体';">华文楷体</li>
                      <li class="dropdown-item" data-family="华文隶书" style="font-family:'华文隶书';">华文隶书</li>
                      <li class="dropdown-item" data-family="华文新魏" style="font-family:'华文新魏';">华文新魏</li>
                      <li class="dropdown-item" data-family="华文行楷" style="font-family:'华文行楷';">华文行楷</li>
                      <li class="dropdown-item" data-family="华文中宋" style="font-family:'华文中宋';">华文中宋</li>
                      <li class="dropdown-item" data-family="华文彩云" style="font-family:'华文彩云';">华文彩云</li>
                      <li class="dropdown-item" data-family="Arial" style="font-family:'Arial';">Arial</li>
                      <li class="dropdown-item" data-family="Segoe UI" style="font-family:'Segoe UI';">Segoe UI</li>
                      <li class="dropdown-item" data-family="Ink Free" style="font-family:'Ink Free';">Ink Free</li>
                      <li class="dropdown-item" data-family="Fantasy" style="font-family:'Fantasy';">Fantasy</li>
                    </ul>
                  </div>
                </div>
                <div class="menu-item__size">
                  <span class="select" data-toggle="dropdown" title="设置字号">{{menu_item_size_model.name}}</span>
                  <div class="dropdown-menu" @click="menu_item_size_click">
                    <ul>
                      <li class="dropdown-item" data-size="56">初号</li>
                      <li class="dropdown-item" data-size="48">小初</li>
                      <li class="dropdown-item" data-size="34">一号</li>
                      <li class="dropdown-item" data-size="32">小一</li>
                      <li class="dropdown-item" data-size="29">二号</li>
                      <li class="dropdown-item" data-size="24">小二</li>
                      <li class="dropdown-item" data-size="21">三号</li>
                      <li class="dropdown-item" data-size="20">小三</li>
                      <li class="dropdown-item" data-size="18">四号</li>
                      <li class="dropdown-item" data-size="16">小四</li>
                      <li class="dropdown-item" data-size="14">五号</li>
                      <li class="dropdown-item" data-size="12">小五</li>
                      <li class="dropdown-item" data-size="10">六号</li>
                      <li class="dropdown-item" data-size="8">小六</li>
                      <li class="dropdown-item" data-size="7">七号</li>
                      <li class="dropdown-item" data-size="6">八号</li>
                    </ul>
                  </div>
                </div>
                <div @click="menu_item_size_add_click" class="menu-item__size-add" title="增大字号(Ctrl+[)">
                <i></i>
                </div>
                <div  @click="menu_item_size_minus_click" class="menu-item__size-minus" title="减小字号(Ctrl+])">
                <i></i>
                </div>
                <div @click="menu_item_bold_click" class="menu-item__bold" title="加粗(Ctrl+B)">
                <i></i>
                </div>
                <div @click="menu_item_italic_click" class="menu-item__italic" title="斜体(Ctrl+I)">
                <i></i>
                </div>
                <div class="menu-item__underline" title="下划线(Ctrl+U)">
                  <div class="selectlog" data-toggle="dropdown">
                     <i></i>
                     <span class="select"></span>
                  </div>
                  <div class="dropdown-menu options"  @click="menu_item_underline_click">
                    <ul>
                      <li class="dropdown-item" data-decoration-style='nothing'>
                        <i></i>
                      </li>
                      <li class="dropdown-item" data-decoration-style='solid'>
                          <i></i>
                      </li>
                      <li class="dropdown-item" data-decoration-style='double'>
                          <i></i>
                      </li>
                      <li class="dropdown-item" data-decoration-style='dashed'>
                          <i></i>
                      </li>
                      <li class="dropdown-item" data-decoration-style='dotted'>
                          <i></i>
                      </li>
                      <li class="dropdown-item" data-decoration-style='wavy'>
                          <i></i>
                      </li>
                      </ul>
                   
                  </div>
                </div>
                <div class="menu-item__strikeout"  @click="menu_item_strikeout_click" title="删除线(Ctrl+Shift+X)">
                <i></i>
                </div>
                <div class="menu-item__superscript"  @click="menu_item_superscript_click" title="上标(Ctrl+Shift+,)">
                <i></i>
                </div>
                <div class="menu-item__subscript"  @click="menu_item_subscript_click" title="下标(Ctrl+Shift+.)">
                <i></i>
                </div>
                <div class="menu-item__color"  @click="menu_item_color_click" title="字体颜色">
                 
                  <i></i>
                  <span></span>
                  <input type="color" class="inputcss"/>
                </div>
                <div class="menu-item__highlight"  @click="menu_item_highlight_click"  title="高亮">
                <i></i>
                <span></span>
                <input type="color" class="inputcss"/>
                </div>
            </div>
            <div class="menu-divider"></div>
            <div class="menu-item">
                <div class="menu-item__title"  >
                  <div data-toggle="dropdown">
                    <i style="transform:translateY(3px) translateX(-5px)"></i>
                    <span class="select" title="切换标题">{{menu_item_title_model.name}}</span>
                  </div>
                  <div class="dropdown-menu" @click="menu_item_title_click">
                    <ul>
                      <li class="dropdown-item" data-size="56">初号</li>
                      <li class="dropdown-item" data-level="text" style="font-size:16px;">正文</li>
                      <li class="dropdown-item" data-level="first" style="font-size:26px;">标题1</li>
                      <li class="dropdown-item" data-level="second" style="font-size:24px;">标题2</li>
                      <li class="dropdown-item" data-level="third" style="font-size:22px;">标题3</li>
                      <li class="dropdown-item" data-level="fourth" style="font-size:20px;">标题4</li>
                      <li class="dropdown-item" data-level="fifth" style="font-size:18px;">标题5</li>
                      <li class="dropdown-item" data-level="sixth" style="font-size:16px;">标题6</li>
                    </ul>
                  </div>
                </div>
                
                <div  @click="menu_item_left_click" title="左对齐" class="menu-item__left">
                <i></i>
                </div>
                <div  @click="menu_item_center_click" title="居中对齐"  class="menu-item__center">
                <i></i>
                </div>
                <div  @click="menu_item_right_click" title="右对齐"  class="menu-item__right">
                <i></i>
                </div>
                <div  @click="menu_item_alignment_click" title="两端对齐"  class="menu-item__alignment">
                <i></i>
                </div>
                <div  @click="menu_item_justify_click"  title="分散对齐"  class="menu-item__justify">
                <i></i>
                </div>
                <div class="menu-item__row-margin"  >
                  <i title="行间距" data-toggle="dropdown"></i>
                  <div class="dropdown-menu" @click="menu_item_row_click">
                    <ul>
                      <li class="dropdown-item" data-rowmargin='1'>1</li>
                      <li class="dropdown-item" data-rowmargin="1.25">1.25</li>
                      <li class="dropdown-item" data-rowmargin="1.5">1.5</li>
                      <li class="dropdown-item" data-rowmargin="1.75">1.75</li>
                      <li class="dropdown-item" data-rowmargin="2">2</li>
                      <li class="dropdown-item" data-rowmargin="2.5">2.5</li>
                      <li class="dropdown-item" data-rowmargin="3">3</li>
                    </ul>
                  </div>
                </div>
                <div class="menu-item__list" >
                  <i  data-toggle="dropdown" title="列表"></i>
                  <div class="dropdown-menu"  @click="menu_item_list_click">
                    <ul>
                      <li class="dropdown-item">
                          <label>取消列表</label>
                      </li>
                      <li class="dropdown-item" data-list-type="ol" data-list-style='decimal'>
                          <label>有序列表：</label>
                          <ol>
                          <li>________</li>
                          </ol>
                      </li>
                      <li class="dropdown-item" data-list-type="ul" data-list-style='checkbox'>
                          <label>复选框列表：</label>
                          <ul style="list-style-type: '☑️ ';">
                          <li>________</li>
                          </ul>
                      </li>
                      <li class="dropdown-item" data-list-type="ul" data-list-style='disc'>
                          <label>实心圆点列表：</label>
                          <ul style="list-style-type: disc;">
                          <li>________</li>
                          </ul>
                      </li>
                      <li class="dropdown-item" data-list-type="ul" data-list-style='circle'>
                          <label>空心圆点列表：</label>
                          <ul style="list-style-type: circle;">
                          <li>________</li>
                          </ul>
                      </li>
                      <li class="dropdown-item" data-list-type="ul" data-list-style='square'>
                          <label>空心方块列表：</label>
                          <ul style="list-style-type: square;">
                          <li>________</li>
                          </ul>
                      </li>
                    </ul>
                  </div>
                </div>
               
            </div>
            <div class="menu-divider"></div>
            <div class="menu-item">
                <div class="menu-item__table" @click="menu_divider_click">
                <i title="表格"></i>
                </div>
                <div class="menu-item__table__collapse">
                <div class="table-close" @click="menu_divider_close_click">×</div>
                <div class="table-title">
                    插入表格
                </div>
                <div class="table-panel" @mousemove="tablemove" @click="tableclick" ref="tablepanel"></div>
                </div>
                <div class="menu-item__image" >
                  <i title="图片" @click="menu_item_image_click"></i>
                  <input type="file"  @change="menu_item_image_input_change" accept=".png, .jpg, .jpeg, .svg, .gif">
                </div>
                <div class="menu-item__hyperlink">
                <i title="超链接" data-toggle="modal" data-target="[hyperlinkpanel]"></i>
                <div class="modal" style="margin-top:80px ;" tabindex="-1" ref="hyperlinkpanel" hyperlinkpanel>
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-body">
                        <form  class="form">
                          <div class="form-group row">
                            <label for="textname" class="col-sm-3 col-form-label">文本:</label>
                            <div class="col-sm-7">
                              <input type="text" class="form-control" name="textname">
                            </div>
                          </div>
                          <div class="form-group row">
                            <label for="linkname" class="col-sm-3 col-form-label">链接:</label>
                            <div class="col-sm-7">
                              <input type="text" class="form-control" name="linkname" >
                            </div>
                          </div>
                         
                        </form>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" @click="menu_item_hyperlink_click">保存</button>
                      </div>
                    </div>
                  </div>
                </div>
                </div>
                <div class="menu-item__separator" >
                <i title="分割线" data-toggle="dropdown"></i>
                <div class="dropdown-menu options" @click="menu_item_separator_click">
                    <ul>
                    <li class="dropdown-item" data-separator='0,0'>
                        <i></i>
                    </li>
                    <li class="dropdown-item" data-separator="1,1">
                        <i></i>
                    </li>
                    <li class="dropdown-item" data-separator="3,1">
                        <i></i>
                    </li>
                    <li class="dropdown-item" data-separator="4,4">
                        <i></i>
                    </li>
                    <li class="dropdown-item" data-separator="7,3,3,3">
                        <i></i>
                    </li>
                    <li class="dropdown-item" data-separator="6,2,2,2,2,2">
                        <i></i>
                    </li>
                    </ul>
                </div>
                </div>
                <div class="menu-item__watermark">
                  <i title="水印(添加、删除)" data-toggle="dropdown"></i>
                  <div class="dropdown-menu options">
                    <ul>
                      <li class="dropdown-item" data-menu="add" data-toggle="modal" data-target="[watermark]">添加水印</li>
                      <li class="dropdown-item" data-menu="delete" @click="menu_item_watermark_delete_click">删除水印</li>
                    </ul>
                  </div>
                  <div class="modal" style="margin-top:80px ;" tabindex="-1" ref="watermark" watermark>
                    <div class="modal-dialog">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title">新增水印</h5>
                        </div>
                        <div class="modal-body">
                          <form  class="form">
                            <div class="form-group row">
                              <label for="textcontent" class="col-sm-3 col-form-label"><span style="color: red;">*</span>内容:</label>
                              <div class="col-sm-7">
                                <input type="text" class="form-control" name="textcontent">
                              </div>
                            </div>
                            <div class="form-group row">
                              <label for="colorcontent" class="col-sm-3 col-form-label"><span style="color: red;">*</span>颜色:</label>
                              <div class="col-sm-7">
                                <input type="color" class="form-control" name="colorcontent" >
                              </div>
                            </div>
                            <div class="form-group row">
                              <label for="sizecontent" class="col-sm-3 col-form-label"><span style="color: red;">*</span>字体大小:</label>
                              <div class="col-sm-7">
                                <input type="number" class="form-control" name="sizecontent" >
                              </div>
                            </div>
                          </form>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                          <button type="button" class="btn btn-primary" data-dismiss="modal" @click="menu_item_watermark_add_click">保存</button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- <div class="menu-item__codeblock" title="代码块">
                  <i></i>
                </div> -->
               
                <div @click="menu_item_page_break_click" class="menu-item__page-break" title="分页符">
                <i></i>
                </div>
               
                <!-- <div class="menu-item__control">
                <i title="控件"></i>
                <div class="options">
                    <ul>
                    <li data-control='text'>文本</li>
                    <li data-control="select">列举</li>
                    <li data-control="date">日期</li>
                    <li data-control="checkbox">复选框</li>
                    <li data-control="radio">单选框</li>
                    </ul>
                </div>
                </div> -->
                <div @click="menu_item_checkbox_click" class="menu-item__checkbox" title="复选框">
                <i></i>
                </div>
                <div @click="menu_item_radio_click" class="menu-item__radio" title="单选框">
                <i></i>
                </div>
                <!-- <div class="menu-item__latex" title="LateX">
                  <i></i>
                </div>
                <div class="menu-item__block" title="内容块">
                  <i></i>
                </div> -->
                <div class="menu-item__date">
                <i title="日期"  @click="setlastchange"  data-toggle="dropdown"></i>
                <div class="dropdown-menu options"  @click="menu_item_date_click">
                    <ul>
                    <li class="dropdown-item" data-format="yyyy-MM-dd">{{dateformatday}}</li>
                    <li class="dropdown-item" data-format="yyyy-MM-dd hh:mm:ss">{{dateformattime}}</li>
                    </ul>
                </div>
                </div>
               
            </div>
            <div class="menu-divider"></div>
            <div class="menu-item">
                <div class="menu-item__search" @click="menu_item_search_click"  data-menu="search">
                <i title="搜索"></i>
                </div>
                <div class="menu-item__search__collapse" style="display: block;left: -100px;" v-if="showsearch">
                  <div class="menu-item__search__collapse__search">
                      <input name="searchdata" @input="menu_item_search_change" type="text" />
                      <label class="search-result"></label>
                      <div class="arrow-left" @click="menu_item_search_arrow_left_click">
                      <i></i>
                      </div>
                      <div class="arrow-right" @click="menu_item_search_arrow_right_click">
                      <i></i>
                      </div>
                      <span @click="menu_item_search_close_click">×</span>
                  </div>
                  <div class="menu-item__search__collapse__replace">
                      <input name="replacedata" type="text">
                      <button @click="menu_item_search_replace_click">替换</button>
                  </div>
                </div>
                <div class="menu-item__print" @click="menu_item_print_click" data-menu="print">
                <i title="打印"></i>
                </div>
                <div class="menu-item__download" @click="worddownload" data-menu="download">
                  <i title="下载" style="background-image:url('./assets/images/download.svg')"> </i>
                </div>
                <div class="menu-item__save"  @click="savedata" data-menu="save">
                  <i title="保存" style="background-image:url('./assets/images/save.svg')"> </i>
                </div>
            </div>
            </div>
            <div class="catalog" v-if="catalogshow" editor-component="catalog">
              <div class="catalog__header">
                  <span>目录</span>
                  <div class="catalog__header__close">
                    <i></i>
                  </div>
              </div>
              <div class="catalog__main">
                  <div class="catalog-item" v-for="value in catalog" :key="value">
                    <div class="catalog-item__content" @click="catalog_main_click(value)">
                      <span>{{value.name}}</span>
                    </div>
                  </div>
              </div>
            </div>
        <div class="editor canvas-editor"></div>
        <!-- 右边的标签 -->
        <div class="comment" editor-component="comment">
          
        </div>
    <div class="footer" editor-component="footer">
      <div>
        <div class="catalog-mode" @click="catalog_mode_click" title="目录">
          <i></i>
        </div>
        <div class="page-mode">
          <i title="页面模式(分页、连页)" data-toggle="dropdown"></i>
          <div class="dropdown-menu options"   @click="page_mode_click">
            <ul>
              <li class="dropdown-item" data-page-mode="paging">分页</li>
              <li class="dropdown-item" data-page-mode="continuity">连页</li>
            </ul>
          </div>
        </div>
        <span>可见页码：<span class="page-no-list">1</span></span>
        <span>页面：<span class="page-no">1</span>/<span class="page-size">1</span></span>
        <span>字数：<span class="word-count">0</span></span>
      </div>
      <!-- <div class="editor-mode" title="编辑模式(编辑、清洁、只读、表单)">编辑模式</div> -->
      <div>
        <div class="page-scale-minus" @click="page_scale_minus_click" title="缩小(Ctrl+-)">
          <i></i>
        </div>
        <span class="page-scale-percentage" ref="pagescalenumber" @click="page_scale_percentage_click"  title="显示比例(点击可复原)">100%</span>
        <div class="page-scale-add"  @click="page_scale_add_click" title="放大(Ctrl+=)">
          <i></i>
        </div>
        <div class="paper-size">
          <i title="纸张类型" data-toggle="dropdown"></i>
          <div class="dropdown-menu options" @click="paper_size_click">
            <ul>
              <li class="dropdown-item" data-paper-size="794*1123">A4</li>
              <li class="dropdown-item" data-paper-size="1593*2251">A2</li>
              <li class="dropdown-item" data-paper-size="1125*1593">A3</li>
              <li class="dropdown-item" data-paper-size="565*796">A5</li>
              <li class="dropdown-item" data-paper-size="412*488">5号信封</li>
              <li class="dropdown-item" data-paper-size="450*866">6号信封</li>
              <li class="dropdown-item" data-paper-size="609*862">7号信封</li>
              <li class="dropdown-item" data-paper-size="862*1221">9号信封</li>
              <li class="dropdown-item" data-paper-size="813*1266">法律用纸</li>
              <li class="dropdown-item" data-paper-size="813*1054">信纸</li>
            </ul>
          </div>
        </div>
        <div class="paper-direction">
          <i title="纸张方向" data-toggle="dropdown"></i>
          <div class="dropdown-menu options" @click="paper_direction_click">
            <ul>
              <li class="dropdown-item" data-paper-direction="vertical">纵向</li>
              <li class="dropdown-item" data-paper-direction="horizontal">横向</li>
            </ul>
          </div>
        </div>
        <!-- <div class="paper-margin" title="页边距">
          <i></i>
        </div> -->
        <!-- <div class="fullscreen" title="全屏显示">
          <i></i>
        </div> -->
       
      </div>

    </div>
    </div>
    
</template>

<script>
    import * as signalR from '@microsoft/signalr';
    import 'bootstrap/dist/css/bootstrap.css'
    import * as proxyarr from'/public/assets/js/proxyarr'
    import 'bootstrap/dist/js/bootstrap.js'
    import Editor,{
  BlockType,
  Command,
  ControlType,
  EditorMode,
  EditorZone,
  ElementType,
  IBlock,
  ICatalogItem,
  IElement,
  KeyMap,
  ListStyle,
  ListType,
  PageMode,
  PaperDirection,
  RowFlex,
  TextDecorationStyle,
  TitleLevel,
  splitText
} from '@hufe921/canvas-editor'
    import * as ajaxhelper from'/public/assets/js/ajaxhelper'    


    export default {
    name: 'canvas-editor', 
    data(){
      return{
        instance:null,
        connection:null,
        olddata:null,
        isServer:false,
        haveChange:false,
        lastchange:new Date(),
        menu_item_font_model:{"value":"Microsoft YaHei","name":"微软雅黑"},
        menu_item_size_model:{"value":"16","name":"小四"},
        menu_item_title_model:{"value":"text","name":"正文"},
        colIndex:0,
        rowindex:0,
        tableCellList:[],
        showsearch:false,
        catalog:[],
        catalogshow:true
      }
    },
    props: {
       data: Object,
      backmain:Function,
    },
    computed:{
      dateformatday () {
        let dateform=this.lastchange;
        let year=dateform.getFullYear();
        let month=dateform.getMonth();
        let day=dateform.getDate();
        return `${year}-${month}-${day}`;
      },
      dateformattime () {
        let dateform=this.lastchange;
        let year=dateform.getFullYear();
        let month=dateform.getMonth();
        let day=dateform.getDate();
        let hours=dateform.getHours();
        let min=dateform.getMinutes();
        let sec=dateform.getSeconds();
        return `${year}-${month}-${day} ${hours}:${min}:${sec}`;
      }
    },
    methods:{
       //重写的新增,内容可以不管,cv就行
       insertElementList(instance,payload,startIndex,endIndex) {
        
        var draw= instance.commandAdapt.draw;
        const isReadonly = instance.commandAdapt.draw.isReadonly();
        if (isReadonly)
          return;
        const elementList = instance.commandAdapt.draw.getElementList();
        if(payload==null){
         
          elementList.splicesend(startIndex,endIndex);
        }else{
          if(payload instanceof Array){
            let spliceArgs = [startIndex, endIndex];
                spliceArgs = spliceArgs.concat(payload);
                elementList.splicesend(...spliceArgs);
          }else{
            elementList.splicesend(startIndex,endIndex,payload);
          }
        }

        let textstartIndex=draw.range.range.startIndex;
        let textendIndex=draw.range.range.endIndex;
        instance.commandAdapt.draw.render({
            curIndex:textstartIndex
        });
        instance.commandAdapt.draw.range.setRange(textstartIndex, textendIndex);
      },
      startConnection() {
         //创建连接
        let url=this.$apiUrl;
         this.connection = new signalR.HubConnectionBuilder()
          // .withUrl(url+"/CollaborativeEditing") // 替换为你的SignalR服务URL
          .withUrl("/socketcon/CollaborativeEditing") // 替换为你的SignalR服务URL
          .configureLogging(signalR.LogLevel.Information) 
          .build();
              
          //响应回调
          this.connection.on('ReceiveServerResponse', res=>{
         
          });
          //响应发送所有人消息
          this.connection.on('SendAllMessage', res=>{
         
          });
          //响应发送其他人
          this.connection.on('SendOtherMessage', res=>{   
      
            let startindex=0;
            let endindex=0;
            let adddata=null;
            var resentity=JSON.parse(res);
            if(resentity.method=="splice"){
              if(resentity.input!=null){
                
                if(resentity.input[0]!=null){
                  startindex=resentity.input[0];
                
                }
                if(resentity.input[1]!=null){
                  endindex=resentity.input[1];
                }
                if(resentity.input[2]!=null&&resentity.input[2].value!=null){
                  adddata=resentity.input[2];
                }
                this.insertElementList(this.instance,adddata,startindex,endindex);
              }
              return;
            }
            if(resentity.method=="slice"){
              if(resentity.senddata!=null){
                if(resentity.senddata[0]!=null){
                  startindex=resentity.senddata[0];
                }
                if(resentity.senddata[1]!=null){
                  endindex=resentity.senddata[1];
                }
                if(resentity.senddata[2]!=null){
                  adddata=resentity.senddata[2];
                }
                this.insertElementList(this.instance,adddata,startindex,endindex-startindex);
              }
              return;
            }
          });
          //开始连接
          this.connection.start();
      },
      menu_item_back(){
        this.backmain();
      },
      menu_item_undoclick(){
        this.instance.command.executeUndo()
      },
      menu_item_redoclick(){
        this.instance.command.executeRedo()
      },
      menu_item_painterclick(){
        this.instance.command.executePainter({
          isDblclick: false
        })
      },
      menu_item_redodblclick(){
        this.instance.command.executePainter({
          isDblclick: true
        })
      },
      menu_item_formatclick(){
        this.instance.command.executeFormat();
      },
      menu_item_font_click(e){
        e.preventDefault(); // 阻止链接默认行为
        var selectedValue = e.target.getAttribute('data-family'); // 获取数据值
        if(selectedValue==null){
          return;
        }
        this.menu_item_font_model.name=e.target.textContent
        this.menu_item_font_model.value=selectedValue
        this.instance.command.executeFont(selectedValue)
      },
      menu_item_size_click(e){
        e.preventDefault(); // 阻止链接默认行为
        var selectedValue = e.target.getAttribute('data-size'); // 获取数据值
        if(selectedValue==null){
          return;
        }
        this.menu_item_size_model.name=e.target.textContent
        this.menu_item_size_model.value=selectedValue
        this.instance.command.executeSize(Number(selectedValue))
      },
      menu_item_size_add_click(){
        this.instance.command.executeSizeAdd()
      },
      menu_item_size_minus_click(){
        this.instance.command.executeSizeMinus()
      },
      menu_item_bold_click(){
        this.instance.command.executeBold()
      },
      menu_item_italic_click(){
        this.instance.command.executeItalic()
      },
      menu_item_underline_click(e){
        var selectedValue = e.target.getAttribute('data-decoration-style'); // 获取数据值
        if(selectedValue=="nothing"){
          this.instance.command.executeUnderline();
          return;
        }
        this.instance.command.executeUnderline({
          style: selectedValue
        })
      },
      menu_item_strikeout_click(){
        this.instance.command.executeStrikeout();
      },
      menu_item_superscript_click(){
        this.instance.command.executeSuperscript()
      },
      menu_item_subscript_click(){
        this.instance.command.executeSubscript()
      },
      menu_item_color_click(e){
        let that=this;
        let inputlist=e.currentTarget.getElementsByTagName("input");
        let colorinput=inputlist[0];
        let colorSpanDomlist = e.currentTarget.getElementsByTagName('span');
        let colorSpanDom=colorSpanDomlist[0];
        colorinput.oninput = function () {
          colorSpanDom.style.backgroundColor=colorinput.value;
          that.instance.command.executeColor(colorinput.value)
        }
        colorinput.click();
      },
      menu_item_highlight_click(e){
        let that=this;
        let inputlist=e.currentTarget.getElementsByTagName("input");
        let colorinput=inputlist[0];
        let colorSpanDomlist = e.currentTarget.getElementsByTagName('span');
        let colorSpanDom=colorSpanDomlist[0];
        colorinput.oninput = function () {
          colorSpanDom.style.backgroundColor=colorinput.value;
          that.instance.command.executeHighlight(colorinput.value)
        }
        colorinput.click();
      },
      menu_item_title_click(e){
        e.preventDefault(); // 阻止链接默认行为
        var selectedValue = e.target.getAttribute('data-level'); // 获取数据值
        if(selectedValue==null){
          return;
        }
        this.menu_item_title_model.name=e.target.textContent
        this.menu_item_title_model.value=selectedValue
        
        this.instance.command.executeTitle(selectedValue)
      },
      menu_item_left_click(){
        this.instance.command.executeRowFlex(RowFlex.LEFT)
      },
      menu_item_center_click(){
        this.instance.command.executeRowFlex(RowFlex.CENTER)
      },
      menu_item_right_click(){
        this.instance.command.executeRowFlex(RowFlex.RIGHT)
      },
      menu_item_alignment_click(){
        this.instance.command.executeRowFlex(RowFlex.ALIGNMENT)
      },
      menu_item_justify_click(){
        this.instance.command.executeRowFlex(RowFlex.JUSTIFY)
      },
      menu_item_row_click(e){
        e.preventDefault(); // 阻止链接默认行为
        var selectedValue = e.target.getAttribute('data-rowmargin'); // 获取数据值
        if(selectedValue==null){
          return;
        }
        this.instance.command.executeRowMargin(Number(selectedValue))
      },
      menu_item_list_click(e){
        e.preventDefault(); // 阻止链接默认行为
        let choosedom=e.target.closest('[data-list-type]',e.currentTarget);
        if(choosedom==null){
          this.instance.command.executeList();
          return;
        }
        var listtypeValue = choosedom.getAttribute('data-list-type'); // 获取数据值
        var liststyleValue = choosedom.getAttribute('data-list-style'); // 获取数据值
        this.instance.command.executeList(listtypeValue, liststyleValue)
      },
      menu_divider_click(e){
        e.preventDefault(); // 阻止链接默认行为
        var tabledom = e.currentTarget.nextElementSibling;
        tabledom.style.display="block"
  
      },
      menu_divider_close_click(e){
        this.recoveryTable();
      },
      //移除所有格选择
      removeAllTableCellSelect() {
        this.tableCellList.forEach(tr => {
          tr.forEach(td => td.classList.remove('active'))
        })
      },
      //设置标题内容
      setTableTitle(payload) {
        let titlePanel=this.$refs.tablepanel.previousElementSibling;
        titlePanel.innerText = payload
      },
      //初始
      recoveryTable() {
        // 还原选择样式、标题、选择行列
        this.removeAllTableCellSelect()
        this.setTableTitle('插入')
        this.colIndex = 0
        this.rowIndex = 0
        // 隐藏panel
        let table=this.$refs.tablepanel.parentNode
        table.style.display = 'none'
      },
      //移除表格
      tablemove (evt) {
        const celSize = 16
        const rowMarginTop = 10
        const celMarginRight = 6
        const { offsetX, offsetY } = evt
        // 移除所有选择
        this.removeAllTableCellSelect()
        this.colIndex = Math.ceil(offsetX / (celSize + celMarginRight)) || 1
        this.rowIndex = Math.ceil(offsetY / (celSize + rowMarginTop)) || 1
        // 改变选择样式
        this.tableCellList.forEach((tr, trIndex) => {
          tr.forEach((td, tdIndex) => {
            if (tdIndex < this.colIndex && trIndex < this.rowIndex) {
              td.classList.add('active')
            }
          })
        })
        // 改变表格标题
        this.setTableTitle(`${this.rowIndex}×${this.colIndex}`)
      },
      //点击表格
      tableclick(){
        this.instance.command.executeInsertTable(this.rowIndex, this.colIndex)
        this.recoveryTable()
      },
      menu_item_image_click(e){
        e.preventDefault(); // 阻止链接默认行为
        let input=e.currentTarget.nextElementSibling;
        input.click();
      },
      menu_item_image_input_change(e){
        let that=this;
        e.preventDefault(); // 阻止链接默认行为
        let imageFileDom=e.currentTarget;
        const file = imageFileDom.files[0];
        const fileReader = new FileReader()
        fileReader.readAsDataURL(file)
        fileReader.onload = function () {
          // 计算宽高
          const image = new Image()
          const value = fileReader.result
          image.src = value
          image.onload = function () {
            that.instance.command.executeImage({
              value,
              width: image.width,
              height: image.height
            })
            imageFileDom.value = ''
          }
        }
      },
      menu_item_hyperlink_click(e){
        let content=e.target.closest(".modal-content");
        let textnameinput=content.querySelectorAll(`[name="textname"]`)[0];
        let linknameinput=content.querySelectorAll(`[name="linkname"]`)[0];
        let textnamedata=textnameinput.value;
        let linknamedata=linknameinput.value;
        textnameinput.value="";
        linknameinput.value="";
        this.instance.command.executeHyperlink({
          type: ElementType.HYPERLINK,
          value: '',
          url:linknamedata,
          valueList: splitText(textnamedata).map(n => ({
            value: n,
            size: 16
          }))
        })
      },
      menu_item_separator_click(e){
        e.preventDefault(); // 阻止链接默认行为
        var selectedValue = e.target.getAttribute('data-separator'); // 获取数据值
        if(selectedValue==null){
          return;
        }
        let payload=selectedValue.split(",");
        this.instance.command.executeSeparator(payload);
      },
      menu_item_watermark_add_click(e){
        let content=e.target.closest(".modal-content");
        let textcontentinput=content.querySelectorAll(`[name="textcontent"]`)[0];
        let colorcontentinput=content.querySelectorAll(`[name="colorcontent"]`)[0];
        let sizecontentinput=content.querySelectorAll(`[name="sizecontent"]`)[0];
        let textcontentdata=textcontentinput.value;
        let colorcontentdata=colorcontentinput.value;
        let sizecontentdata=sizecontentinput.value;
        textcontentinput.value="";
        colorcontentinput.value="";
        sizecontentinput.value="";
        this.instance.command.executeAddWatermark({
            data: textcontentdata,
            color: colorcontentdata,
            size: Number(sizecontentdata)
          });
      },
      menu_item_watermark_delete_click(){
        this.instance.command.executeDeleteWatermark()
      },
      menu_item_page_break_click(){
        this.instance.command.executePageBreak()
      },
      menu_item_checkbox_click(){
        this.instance.command.executeInsertElementList([
          {
            type: ElementType.CHECKBOX,
            checkbox: {
              value: false
            },
            value: ''
          }
        ])
      },
      menu_item_radio_click(){
        this.instance.command.executeInsertElementList([
          {
            type: ElementType.RADIO,
            checkbox: {
              value: false
            },
            value: ''
          }
        ])
      },
      setlastchange(e){
        this.lastchange=new Date();
      },
      menu_item_date_click(e){
    
        var selectedValue = e.target.getAttribute('data-format'); // 获取数据值
        if(selectedValue==null){
          return;
        }
        let selectdata=e.target.innerHTML;
        this.instance.command.executeInsertElementList([
          {
            type: ElementType.DATE,
            value: '',
            dateFormat:selectedValue,
            valueList: [
              {
                value: selectdata
              }
            ]
          }
        ])
      },
      menu_item_search_click(e){
        this.showsearch=!this.showsearch;
      },
      menu_item_search_change(e){
          let changevalue=e.currentTarget.value;
          this.instance.command.executeSearch(changevalue)
      },
      menu_item_search_arrow_left_click(e){
       
        this.instance.command.executeSearchNavigatePre();
      },
      menu_item_search_arrow_right_click(e){
       
        this.instance.command.executeSearchNavigateNext();
      },
      menu_item_search_replace_click(e){
        let content=e.currentTarget.closest(".menu-item__search__collapse");
        let replacedatainput=content.querySelectorAll(`[name="replacedata"]`)[0];
        let replacedata =replacedatainput.value;
        this.instance.command.executeReplace(replacedata)
      },
      menu_item_search_close_click(e){
        // let content=e.currentTarget.closest(".menu-item__search__collapse");
        // let searchdatainput=content.querySelectorAll(`[name="searchdata"]`)[0];
        // let replacedatainput=content.querySelectorAll(`[name="replacedata"]`)[0];
        // searchdatainput.value="";
        // replacedatainput.value="";
        this.showsearch=!this.showsearch;
      },
      menu_item_print_click(){
        this.instance.command.executePrint()
      },
      async loadCatalog(){
         let datalist = await this.instance.command.getCatalog();
         if(this.catalog==null||this.catalog.length==0){
          return;
         }
         this.catalog=datalist.filter((num,index,arr)=>{
            if(num.level=="first"){
              return num;
            }
         });
      },
      catalog_main_click(value){
        this.instance.command.executeLocationCatalog(value.id)
      },
      catalog_mode_click(){
        this.catalogshow=!this.catalogshow;
      },
      page_mode_click(e){
        e.preventDefault(); // 阻止链接默认行为
        var selectedValue = e.target.getAttribute('data-page-mode'); // 获取数据值
        if(selectedValue==null){
          return;
        }
        this.instance.command.executePageMode(selectedValue)
      },
      page_scale_minus_click(){
        this.instance.command.executePageScaleMinus()
      },
      page_scale_add_click(){
        this.instance.command.executePageScaleAdd()
      },
      page_scale_percentage_click(){
        this.instance.command.executePageScaleRecovery()
      },
      paper_size_click(e){
        e.preventDefault(); // 阻止链接默认行为
        var selectedValue = e.target.getAttribute('data-paper-size'); // 获取数据值
        if(selectedValue==null){
          return;
        }
        const [width, height] = selectedValue.split('*').map(Number)
        this.instance.command.executePaperSize(width, height)
      },
      paper_direction_click(e){
        e.preventDefault(); // 阻止链接默认行为
        var selectedValue = e.target.getAttribute('data-paper-direction'); // 获取数据值
        if(selectedValue==null){
          return;
        }
        this.instance.command.executePaperDirection(selectedValue)
      },
      async savedata(){
       
        var data2 = await this.instance.command.getHTML()
        // let url=this.$apiUrl;
        ajaxhelper.default({url:"/websocketapi/WeatherForecast/UpLoadWordData",method:"post",param:{main:data2}},(res)=>{
          console.log(res)
        })
      },
      worddownload(){
       
        // let url=this.$apiUrl;
        ajaxhelper.default({url:"/websocketapi/WeatherForecast/WordDownLoad",method:"get",param:{"id":"200"},responseType:"blob"},(res,xhr)=>{
          // 将blob对象转换为URL
            var url = URL.createObjectURL(xhr.response);
            console.log(xhr.response);
            // 创建一个a标签并设置下载属性
            var a = document.createElement('a');
            a.href = url;
            a.download = '11.docx';
            // 模拟点击a标签下载文件
            document.body.appendChild(a);
            a.click();
            // 释放URL对象
            URL.revokeObjectURL(url);
          
          console.log(res)
        })
      }
    },
    created(){
      this.startConnection();
    },
    mounted(){
      var that=this;
      this.instance= new Editor(
        document.querySelector('.canvas-editor'),
        this.data,
        {}
      );
      this.loadCatalog();
    
      this.instance.eventBus.on('contentChange', () => {
        this.loadCatalog();
      });
      this.instance.eventBus.on('pageScaleChange', (payload) => {
        that.$refs.pagescalenumber.innerHTML=`${Math.floor(payload * 10 * 10)}%`;
      });
      this.instance.eventBus.on('saved', (e) => {this.savedata()})

      let tablePanel=this.$refs.tablepanel
      for (let i = 0; i < 10; i++) {
        const tr = document.createElement('tr')
        tr.classList.add('table-row')
        let trCellList = []
        for (let j = 0; j < 10; j++) {
          const td = document.createElement('td')
          td.classList.add('table-cel')
          tr.append(td)
          trCellList.push(td)
        }
        tablePanel.append(tr)
        this.tableCellList.push(trCellList)
      }
      
      proxyarr.proxyarr.ArrayProto.sliceChanged=(method,input)=>{
        console.log(11)
        if(input==null){
          return;
        }
        if(input[0]==null){
          return;
        }
        if(input[1]==null){
          return;
        }
       
        setTimeout(() => {
          var data=this.instance.commandAdapt.draw.elementList.filter((entity,index,arr)=>{
            if(index>=input[0]&&index<input[1]){
              return entity;
            }
         });
        var senddata=[input[0],input[1],data]
        var sendmes=JSON.stringify({method,senddata});
        this.connection.invoke('SendMessageToServer', sendmes);
        }, 300);
        
      };
      proxyarr.proxyarr.ArrayProto.dataChanged=(method,input)=>{
        var sendmes=JSON.stringify({method,input});
        this.connection.invoke('SendMessageToServer', sendmes);
      };
      
      Object.setPrototypeOf(this.instance.commandAdapt.draw.elementList,proxyarr.proxyarr.ArrayProto)
      
      // let url=this.$apiUrl;
        ajaxhelper.default({url:"/websocketapi/WeatherForecast/GetWordData?id='1'",method:"get"},(res)=>{
          if(res.outType==1){
            this.instance.command.executeSetHTML(res.outHtml);
            Object.setPrototypeOf(this.instance.commandAdapt.draw.elementList,proxyarr.proxyarr.ArrayProto);
            //如果获取的是html,则需要转存到后端缓存
            setTimeout(() => {
            let dataobj=this.instance.commandAdapt.draw.getElementList();
          
            ajaxhelper.default({url:"/websocketapi/WeatherForecast/SaveWordListCache",method:"post",param:{"Listdata":dataobj}},(res1)=>{
      
            })
          }, 300);
          }else{
           
            this.instance.commandAdapt.draw.elementList=res.outListData;
            Object.setPrototypeOf(this.instance.commandAdapt.draw.elementList,proxyarr.proxyarr.ArrayProto)
            this.instance.commandAdapt.draw.render({
                curIndex:1
            });
          }
         
         
      })
    },
  }
  </script>
  <style>
   .inputcss{
    width: 1px;
    height: 1px;
    visibility: hidden;
    outline: none;
    appearance: none; 
   }
   
  </style>
